<template>
  <div class="update-name">
    <!-- 导航栏 -->
    <van-nav-bar
      title="设置昵称"
      left-text="取消"
      right-text="完成"
      @click-left="$emit('close')"
      @click-right="onConfirm"
    />
    <!-- /导航栏 -->
    <!-- 输入框 -->
    <div class="field-wrap">
      <van-field
        v-model.trim="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="10"
        placeholder="请输入昵称"
        show-word-limit
      />
    </div>
    <!-- /输入框 -->
  </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'

export default {
  name: 'UpdateName',
  components: {},
  props: {
      value:{
          type:String,
          required:true
      }
  },
  data () {
    return {
        message:this.value
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
     async onConfirm(){
         this.$toast.loading({
             message:"保存中...",
             forbidClick:true,
             duration:0
         })
         try {
             const  message=this.message
             if (!message.length) {
                 this.$toast("昵称不能为空")
                 return
             }
             await updateUserProfile({
                 name:message
             })
             this.$emit("input",message)
             this.$emit('close', )
             this.$toast.success("更新成功")
         } catch (error) {
             this.toast.fail("更新失败")
         }
     }
  }
}
</script>

<style scoped lang="less">
.field-wrap {
  padding: 20px;
}
</style>